<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        width: 1000px;
        height: 1000px;
        border: 1px solid red;
    }
</style>

<body>
    <button id="btn1">一个按钮</button>
    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <span>123</span>
    <br>
    <div id="div2">
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>
</body>
<script>
    //编写一个通用的时间监听函数，
    //描述事件冒泡的流程
    //无限下拉的图片列表，如何监控每一个图片的点击？
    // 知识点    1.事件绑定    2.事件冒泡      3.事件委托
    //事件代理：  优点：1.代码简洁   2.减少浏览器内存占用
    // 运用到了事件冒泡， 事件绑定到父元素上，通过event对象的target属性判断点击的是哪一个元素，然后进去操作
    let p1 = document.getElementById("p1");

    bingHanlde(document.body, "click", 'p', function(event) {
            console.log(this, 'this');



            console.log('执行了', event.target);

        })
        // p1.addEventListener("click", function(event) {
        //     event.stopPropagation()
        //     console.log('激活');
        // })
        // let div1 = document.getElementById("div1");
        // div1.addEventListener("click", function(event) {
        //     console.log('div1');
        // })
        // let div2 = document.getElementById("div2");
        // div2.addEventListener("click", function(event) {
        //     console.log('div2');
        // })
        //封装事件绑定函数
    function bingHanlde(ele, type, sel, fn) {
        if (fn == null) {
            fn = sel
            sel = null
        }
        ele.addEventListener(type, (event) => {
            let target = event.target
            if (sel) {
                if (target.matches(sel)) {
                    //修改this指向，传入事件对象
                    fn.call(target, event)
                }
            } else {
                //修改this指向，传入事件对象
                fn.call(target, event)
            }
        })
    }
</script>

</html>